<!DOCTYPE html>
<html>
	<head>	
		<title>Dynamic loading through Data Proxy </title>
		<link rel="stylesheet" href="../../../codebase/webix.css" type="text/css" charset="utf-8">
		<script src="../../../codebase/webix.js" type="text/javascript" charset="utf-8"></script>

		<link rel="stylesheet" type="text/css" href="../common/samples.css">
		<script src="../common/testdata.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class='header_comment'>Dynamic loading through Data Proxy</div>
		<div id="testA" style='height:600px'></div>
		<hr>
		
		<script type="text/javascript" charset="utf-8">

		webix.ready(function(){
			grida = new webix.ui({
				container:"testA",
				view:"datatable",
				columns:[
					{ id:"value",	header:"Name", 			width:200 },
					{ id:"section",	header:"Section",		width:120 },
					{ id:"size",	header:"Size" , 		width:80  },
					{ id:"architecture",	header:"PC", 	width:60  }
				],
				
				autowidth:true,
				type:{template:"{common.space()}"},
				url:{
					$proxy:true,
					load:function(view, callback, details){
						console.log(details)
						if (details){
							var data = [];
							for (var i=0; i<details.count; i++)
								data.push("x"+(i+1+details.from));

							//need to be async
							webix.delay(function(){	
								webix.ajax.$callback(view, callback, {
									pos:details.from,
									data:data
								});
							});

						} else {

							webix.ajax.$callback(view, callback, {
								total_count:100,
								data:["1","2","3","4","5"]
							});

						}
					}
				}
			});
		});
		</script>
	</body>
</html>